
import { Card, Carousel, Toast } from 'antd-mobile';
import React from 'react';
import history from 'router/history'
import style from './style.module.scss';
import { setUrlParameter, useUrlParameter } from 'router/utils';
import lazy from 'router/utils/lazy';
import Panel from 'components/Panel';
import { server } from 'server';

const SettleAccounts = lazy(() => import('page/SettleAccounts'));

const demoImg = require('./imgs/deom.jpg')

export default () => {

    const [sa] = useUrlParameter('sa');

    const [cid] = useUrlParameter('cid');

    const { addShoppingCart, buyNow } = useShoppingCart(cid);

    return (
        <>
            <Panel className={style.body} style={{ display: sa && 'none' }} >
                <div className={style.cont} >
                    <Carousel
                        infinite
                        autoplay={false}
                        className={style.carousel}
                    >
                        {[1, 2, 3, 4].map((v, i) => {
                            return (
                                <img key={i} src={demoImg} alt="" />
                            )
                        })}
                    </Carousel>
                    <Card full className={style.info} >
                        <Card.Body>
                            <div className={style.title} >商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</div>
                            <div className={style.price} >¥999</div>
                        </Card.Body>
                    </Card>
                    <Card full className={style.details} >
                        <Card.Header title="详情" />
                        <Card.Body>
                            {[1, 2, 3, 4].map((v, i) => {
                                return (
                                    <img key={i} src={demoImg} alt="" />
                                )
                            })}
                        </Card.Body>
                    </Card>
                </div>
                <div className={style.foot} >
                    <div onClick={() => { history.goBack() }} >返回</div>
                    <div className={style.cart} onClick={addShoppingCart} >加入购物</div>
                    <div className={style.buy} onClick={buyNow} >立即购买</div>
                </div>
            </Panel >

            {sa && <SettleAccounts />}
        </>
    )
}


const useShoppingCart = cid => {

    /** 立即购买 */
    const buyNow = React.useCallback(async () => {
        const ajax = await server.post('/medicine/order/createOrder', [{ id: parseInt(cid), goodsNumber: 1 }]).end();
        if (ajax.err) {
        } else {
            setUrlParameter({ sa: ajax.res.body.data })
        }
    }, [cid])

    /** 添加购物车 */
    const addShoppingCart = React.useCallback(async () => {
        const ajax = await server.post('/medicine/shopping/add', { goodsId: cid, number: 1 }).end();
        if (ajax.err) {
        } else {
            Toast.success('添加成功！！！', 1);
        }
    }, [cid])

    return {
        addShoppingCart,
        buyNow,
    }
}